<template>
  <q-btn icon="camera_alt" @click="visible = true">
    <q-dialog
      persistent
      maximized
      v-model="visible"
    >
      <q-card dark class="column">
        <q-card-section class="row items-center q-pb-none">
          <q-space />
          <q-btn icon="close" class="text-h5" flat round dense v-close-popup />
        </q-card-section>
        <q-card-section class="col-10" v-if="photoUrl">
          <div class="full-height full-width">
            <img class="absolute-center" :src="photoUrl" alt="无效照片" style="width: auto;height: 100%" >
          </div>
        </q-card-section>
        <q-card-section class="col-10 text-h3 text-grey-6" style="letter-spacing:5px" v-else>
          <strong class="absolute-center">{{txt}}</strong>
        </q-card-section>
      </q-card>
    </q-dialog>
  </q-btn>
</template>

<script>
import { watch, ref } from 'vue'
import { api } from 'boot/axios.js'
import { useAPIStore } from 'stores/api/index.js'

export default {
  name: 'PhotoDialog',
  setup () {
    const visible = ref(false)
    const photoUrl = ref('')
    const txt = ref('暂无图片获取')

    watch(visible, value => {
      if (value) {
        getPhoto()
      } else {
        photoUrl.value = ''
      }
    })

    function getPhoto () {
      txt.value = '图片获取中。。。'
      api.get('http://' + useAPIStore().deviceIP + ':8989/cap').then(res => {
        photoUrl.value = 'data:image/png;base64,' + res.data.base64
      }).catch(() => {
        txt.value = '暂无图片获取'
      })
    }

    return {
      visible,
      photoUrl,
      txt
    }
  }
}
</script>
